<template>
	<div class="ImagePreview" v-if="showImagesPreview">
		<Carousel v-model="imagesId" loop dots="none" arrow="never">
			<CarouselItem v-for="(item, index) in images" :key="index">
				<img :src="item.url" class="icon" @load="imgLoad" />
			</CarouselItem>
		</Carousel>
		<div class="pages">
			<span class="page">{{ imagesId + 1 }}</span
			><span>/{{ images.length }}</span>
		</div>
		<div class="time" v-if="showTime">
			<span class="time-text">{{ time }}</span>
		</div>
	</div>
</template>
<script>
import { debounce } from '../tool/util';
export default {
	props: {
		showImagesPreview: {
			type: Boolean,
			default: () => false
		},
		images: {
			type: Array,
			required: true,
			default: () => []
		},
		responseConfirm: {
			type: Function,
			default: null
		},
		cmdId: {
			type: Number,
			default: () => 0
		},
		clientId: {
			type: String,
			default: () => ''
		}
	},
	data() {
		return {
			imagesId: 0,
			startX: '',
			startY: '',
			moveEndX: '',
			moveEndY: '',
			X: '',
			Y: '',
			time: 3,
			timer: null,
			touchmove: null,
			touchstart: null,
			showTime: true
		};
	},
	created() {},
	mounted() {
		this.addListenerImages();
		this.countdown();
	},
	methods: {
		moveSlideImage(e) {
			this.moveEndX = e.changedTouches[0].pageX;
			this.moveEndY = e.changedTouches[0].pageY;
			this.X = this.moveEndX - this.startX;
			this.Y = this.moveEndY - this.startY;
			if (Math.abs(this.X) > Math.abs(this.Y) && this.X > 0) {
				if (this.imagesId > 0 && this.time === 0) {
					this.countdown('right');
					console.log('向右');
				}
			} else if (Math.abs(this.X) > Math.abs(this.Y) && this.X < 0) {
				if (this.imagesId < this.images.length - 1 && this.time === 0) {
					this.countdown('left');
					console.log('向左');
				}
			} else if (Math.abs(this.Y) > Math.abs(this.X) && this.Y > 0) {
				console.log('向下');
			} else if (Math.abs(this.Y) > Math.abs(this.X) && this.Y < 0) {
				console.log('向上');
			} else {
				console.log('没滑动');
			}
		},
		startSlideIameg(e) {
			this.startX = e.touches[0].pageX;
			this.startY = e.touches[0].pageY;
		},
		addListenerImages() {
			this.touchmove = window.addEventListener('touchmove', debounce(this.moveSlideImage, 500), false);
			this.touchstart = window.addEventListener('touchstart', debounce(this.startSlideIameg, 500), false);
		},
		countdown(type) {
			this.showTime = true;
			switch (type) {
				case 'right':
					this.imagesId--;
					this.summaryConfirmImages(this.imagesId);
					this.time = 3;
					break;
				case 'left':
					this.imagesId++;
					this.summaryConfirmImages(this.imagesId);
					this.time = 3;
					break;
				default:
					break;
			}
			let timer = null;
			timer = setInterval(() => {
				console.log('计时器开始');
				this.time--;
				if (this.time === 0) {
					clearInterval(timer);
					this.showTime = false;
				}
			}, 1000);
		},
		imgLoad() {
			this.summaryConfirmImages(this.imagesId);
		},
		//汇总确认切换图片
		summaryConfirmImages(imagesId) {
			let data = {};
			data.type = 'summary-confirm';
			data.index = imagesId;
			this.responseConfirm(
				this.cmdId,
				'in-progress',
				data,
				this.clientId,
				res => {
					console.log(res, 'response confirm in-progress success');
				},
				error => {
					console.log(error, 'response confirm in-progress error');
				}
			);
		}
	}
};
</script>
<style scoped>
.ImagePreview {
	top: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 50;
	background: #fff;
}
.ImagePreview .pages {
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	bottom: 1%;
	width: 20px;
}
.ImagePreview .pages .page {
	color: #64caab;
}
.ImagePreview .icon {
	width: 100%;
	height: 100%;
}
.ImagePreview .time {
	position: absolute;
	top: 2%;
	left: 84%;
	width: 40px;
	height: 40px;
	background: rgba(0, 0, 0, 0.27);
	border: 1px solid #979797;
	border-radius: 50%;
}
.ImagePreview .time .time-text {
	width: 27px;
	height: 31px;
	font-size: 22px;
	font-family: PingFangTC-Regular, PingFangTC;
	font-weight: 200;
	color: #ffffff;
	line-height: 36px;
}
</style>

<style>
.ImagePreview .ivu-carousel {
	width: 100%;
	height: 100%;
}
.ImagePreview .ivu-carousel .ivu-carousel-list {
	width: 100%;
	height: 100%;
}
.ImagePreview .ivu-carousel .ivu-carousel-list .ivu-carousel-track {
	width: 100%;
	height: 100%;
}
.ImagePreview .ivu-carousel .ivu-carousel-list .ivu-carousel-track .ivu-carousel-item {
	height: 100% !important;
}
</style>
